<template>
  <div class="UserSpace">
    <div style="background-image: url('http://localhost:8089/user_center.jpg'); background-position:center;"
         class="header">


      <div class="nav">
        <nav>
          <el-row>
            <el-col :span="5">
              <el-image :size="100" :src="imageURL+user.avatar" style="border-radius: 50%; height: 96px;width: 96px;"/>
              <!--              http://localhost:8080/userEdit.jsp?userId=3   -->
              <div class="user-name title">{{ user.name }} <a :href="`/userEdit?id=${user.id}`"
                                                              class="el-icon-edit-outline"></a></div>
            </el-col>

            <el-col :offset="13" :span="2">
              <p>发帖</p>
              <p>1000</p>
            </el-col>
            <el-col :span="2">
              <p>粉丝</p>
              <p>1000</p>
            </el-col>
            <el-col :span="2">
              <p>关注</p>
              <p>1000</p>
            </el-col>
          </el-row>

        </nav>
      </div>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="帖子" name="1">
          <div>
            <el-empty v-if="pager.items.length===0"/>
            <div v-else>
              <post-item :item="item" v-for="(item,index) in pager.items" :key="index"></post-item>
              <el-pagination
                  @size-change="getData"
                  @current-change="getData"
                  :current-page.sync="pager.current"
                  :page-sizes="[1,10, 20, 30, 40]"
                  :page-size.sync="pager.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total.sync="pager.total">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>


        <!--       <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>-->
        <!--       <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>-->
        <!--       <el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import user from "@/api/user";
import post from "@/api/post";
import service from "@/api";
import UserList from "@/views/user/UserEdit";
import PostItem from "@/components/PostItem";
import PostList from "@/views/PostList";

export default {
  name: "UserSpace",
  components: {PostList, PostItem, UserList},
  data() {
    return {
      id: '',
      activeName: "1",
      imageURL: service.imageURL,
      user: {},
      pager: {
        "current": 1,
        "size": 10,
        "total": 10,
        "items": [],
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id === undefined || this.id === '') {
      this.$router.push({path: "/"});
    }

    this.getData();
    this.getUser();
  },
  methods: {
    getUser() {
      user.getUserById(this.id).then(res => {
        this.user = res.data
      })
    },
    getData() {
      post.getPostsById(this.id, this.pager.current, this.pager.size, this.pager.total).then(res => {
        this.pager = res.data
        console.log(res.data)
      });

    },

  }
}
</script>

<style lang="scss" scoped>
.UserSpace {
  margin-left: 20px;
  margin-right: 20px;

  .tabs {
    width: 100%;

    ::v-deep .el-tabs__item {
      //font-weight: bold;
      color: #2c3e50;
      text-decoration: none;
      font-size: 1.3em;

    }

    ::v-deep .el-tabs__active-bar {
      background-color: #42b983;
      color: #42b983;
    }
  }

  .header {
    //height: 192px;
    width: 100%;


    //.user-infos {
    //  display: flex;
    //
    //  clear-after: both;
    //
    //  .user-msg-left {
    //    margin-left: 3em;
    //    margin-top: 30px;
    //  }
    //
    //  .user-msg-right {
    //
    //    .el-col {
    //      height: 100%;
    //    }
    //
    //
    //  }
    //
    //}


    .user-name {
      font-size: 1.3em;
      font-weight: bold;
    }

    p {
      margin: 0 0;
      line-height: 1.3em;
    }

  }
}
</style>
